<template>
  <div class="container">
    <h1 style="text-align: center">vuex</h1>

    <p @click="getCodeData(1)">vuex的值: {{ $store.state.count }}</p>

    <p>
      <el-button
        type="success"
        @click="
          handleGutter();
          getCodeData(2);
        "
        >gutters 操作改变state值状态 想当于计算属性
      </el-button>
      <span>将state值转为 {{ gCount }}</span>
    </p>
    <p>
      <el-button
        type="success"
        @click="
          handleMutation();
          getCodeData(3);
        "
      >
        mutations 改变vuex的值
      </el-button>
    </p>
    <p>
      <el-button
        type="success"
        @click="
          increment({ amount: 10 });
          getCodeData(4);
        "
      >
        mapMutations映射 改变vuex的值
      </el-button>
    </p>

    <p>
      <el-button
        type="success"
        @click="
          handleAction;
          getCodeData(5);
        "
      >
        actions 异步 改变vuex的值
      </el-button>
    </p>

    <p>
      <el-button
        type="success"
        @click="
          add({ amount: 100 });
          getCodeData(6);
        "
      >
        mapActions 映射 改变vuex的值
      </el-button>
    </p>

    <!-- <div>{{ doneTodosCount }}</div> -->
    <!-- <div>{{ num }} + AAAAA</div> -->

    <div class="box">
      <p v-html="codeData"></p>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  name: 'vuex',
  data () {
    return {
      codeData: ''
    }
  },
  computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'gCount'
    ])

    // ...mapGetters({
    //   // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
    //   num: 'gCount'
    // })
    // doneTodosCount () {
    //   return this.$store.getters.doneTodosCount
    // },
    // num () {
    //   return this.$store.getters.fn
    // }
  },
  methods: {
    handleGutter () {
      // 读取state中的值
      // let val = this.$store.state
      // console.log(val)

      // let b = this.$store.getters.doneTodos
      // console.log('b: ', b)

      // let c = this.$store.getters.doneTodosCount
      // console.log('c: ', c)

      // let d = this.$store.getters.gCount
      // console.log('d: ', d)
      let val = this.$store.state.count
      console.log(val)
      // 设置值

      // this.$store.commit('increment')
      // console.log(this.$store.state.count)
    },
    handleMutation () {
      // this.$store.commit('increment', 10)
      this.$store.commit('increment', { amount: 10 })
      // let obj = { age: 12 }
      // obj = { ...obj, name: '122' }
      // console.log('obj: ', obj)
    },
    // mapMutations映射
    ...mapMutations(['increment']),

    ...mapActions([
      // 'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷：
      // 'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'incrementAsync' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    }),

    handleAction () {
      // 以载荷形式分发
      this.$store.dispatch('incrementAsync', {
        amount: 10
      })

      // // 以对象形式分发
      // this.$store.dispatch({
      //   type: 'incrementAsync',
      //   amount: 10
      // })
    },
    // 显示代码
    getCodeData (code) {
      if (code === 1) {
        this.codeData = `vux取值&nbsp&nbsp&nbspthis.$store.state.count`
      }
      if (code === 2) {
        this.codeData = `Gutter改变值状态 相当于计算属性&nbsp&nbsp&nbspthis.$store.state.count`
      }
      if (code === 3) {
        this.codeData = `Mutations改变值&nbsp&nbsp&nbsp this.$store.commit('increment', { amount: 10 })`
      }
      if (code === 4) {
        this.codeData = `mapMutations映射改变值&nbsp&nbsp&nbsp ...mapMutations(['increment']),`
      }
      if (code === 5) {
        this.codeData = `actions 异步 改变vuex的值&nbsp&nbsp&nbsp 
         this.$store.dispatch('incrementAsync', {
        amount: 10
      }),`
      }
      if (code === 6) {
        this.codeData = `  mapActions 映射 改变vuex的值&nbsp&nbsp&nbsp 
           ...mapActions({
      add: 'incrementAsync'
      }),`
      }
    }
  }
}
// state  存一些数据
// gutter 类似于计算属性 改变state里面的状态(所以可以拿取state里面的值)
</script>

<style scoped>
.box {
  width: 500px;
  height: 300px;
  border: 2px #ccc solid;
  position: absolute;
  right: -100px;
  top: 20%;
  transform: translateX(-50%);
}
</style>
